<template>
  <div class="app-content">
    <!-- 顶部tips -->
    <div class="tips" ref="tips">
      <h3>发货流转订单表</h3>
      <el-form :inline="true" :label-width="Mobile == 'phone' ? '80px' : ''">
        <el-form-item label="订单号">
          <el-input size="small" v-model="SearchForm.OrderNo" placeholder="请输入您要搜索的订单号" :style="{width:Mobile == 'phone' ? '108%' : ''}"></el-input>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-cascader size="small" v-model="SearchForm.OrderStatas" :options="OrderStatasOptions"
            @change="handleChangeStatasOptions"></el-cascader>
        </el-form-item>
        <el-form-item label="发货状态">
          <el-select size="small" v-model="SearchForm.OrderType" placeholder="请选择发货状态">
            <el-option :label="value.label" :value="value.value" v-for="value in OrderTypeOptions"
              :key="value.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :style="{marginLeft:Mobile == 'phone' ? '10px' : ''}">
          <el-button size="mini" type="primary" @click="OnSeacrh">查询</el-button>
          <el-button size="mini" type="success" @click="CreateDialog">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 统计数量部份 -->
    <el-descriptions :column="2" border :style="{ width: Mobile == 'phone'?'100%':'600px' }">
      <el-descriptions-item label="已发货数量合计" :labelStyle="{ width: Mobile == 'phone'?'32%':'150px' }" :contentStyle="{ width: Mobile == 'phone'?'18%':'180px' }">
        <el-link type="danger" :underline="false">{{ count.shipCount }}</el-link>
      </el-descriptions-item>
      <el-descriptions-item label="未发货数量合计" :labelStyle="{ width: Mobile == 'phone'?'32%':'150px' }" :contentStyle="{ width: Mobile == 'phone'?'18%':'180px' }">
        <el-link type="danger" :underline="false">{{ count.noShipCount }}</el-link>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 中间表格部分 -->
    <el-table v-if="tabaleHeight.length" ref="table" :data="tableData" border style="width: 100%" :height="tabaleHeight"
      size="mini" v-loading="loading">
      <el-table-column :label="item.title" :width="item.width" show-overflow-tooltip v-for="item in Page.tableHeader"
        :key="item.title">
        <template v-slot="scope">
          <ColumnTable :CurretItem="scope.row" :ItemValue="item.value" />
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="140">
        <template v-slot="scope">
          <el-button size="mini" type="text" :disabled="scope.row.ship_style == 2"
            @click="UpdataDialog(scope.row, 'UpdataDialog')">直采发货</el-button>
          <el-button size="mini" type="text" :disabled="scope.row.ship_style == 2"
            @click="UpdataDialog(scope.row, 'SendDialog')">库存发货</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页部分 -->
    <div class="pagination">
      <el-pagination @current-change="handleCurrentChange" :current-page="paramsquery.pageIndex"
        :page-size="paramsquery.pageSize" layout="total, prev, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 全局表单弹窗 -->
    <DialogComponent ref="DialogComponent" :Dialog="Dialog" :Mobile="Mobile" @Submit="Submit" />
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex"; // 引入vuex属性
import mixin from "@/mixins/mixin"; // 引入mixin
import { GetShipList, addShip, UpdateShip, GetExpressList, GetShipListCount } from "@/api/index"; // 数据接口 添加流转 修改信息接口 获取快递接口 发货数量接口
import { formattedDate } from "@/utils/index"; // 时间格式化
import { Page } from "./index"; // 引入页面信息
export default {
  mixins: [mixin],
  provide() {
    return {
      CurrentItem: this.CurrentItem,
    };
  },
  data() {
    return {
      /* 页面信息 */
      Page,
      /* 搜索部分 */
      SearchForm: {
        OrderNo: "",
        OrderType: 0,
        OutType: 0,
        OrderStatas: [0],
      },
      /* 订单状态列表 */
      OrderStatasOptions: [
        {
          value: 0,
          label: "全部订单",
        },
        {
          value: 1,
          label: "普通订单",
          children: [
            {
              value: 4,
              label: "正式订单",
            },
            {
              value: 5,
              label: "运营补单",
            },
          ],
        },
        {
          value: 2,
          label: "退款订单",
        },
        {
          value: 3,
          label: "售后订单",
        },
      ],
      /* 订单类型列表 */
      OrderTypeOptions: [
        {
          value: 0,
          label: "全部",
        },
        {
          value: 1,
          label: "未发货",
        },
        {
          value: 2,
          label: "已发货",
        },
      ],
      loading: true, // 表格加载
      tableData: [], // 表格数据
      paramsquery: {
        pageIndex: 1,
        pageSize: 30,
      }, // 分页参数
      total: 0, // 数据总数
      /* 弹窗的信息 默认指定一个 */
      Dialog: Page.Dialog.UpdataDialog,
      /* 已发货未发货数量 */
      count: {}
    };
  },
  computed: {
    ...mapState(["isMobile", "CurrentItem"]),
  },
  created() { },
  mounted() {
    this.GetDataList();
    this.GetOptionsList();
    this.GetCount()
    // console.log(this.tabaleHeight);
    this.tabaleHeight = `calc(${this.tabaleHeight} - 54px)`
  },
  watch: {},
  methods: {
    ...mapActions(["SetCurrentItem"]),
    // 搜索列表
    OnSeacrh() {
      this.paramsquery.pageIndex = 1
      this.GetDataList()
    },
    // 获取发货快递
    GetOptionsList() {
      GetExpressList().then((res) => {
        // console.log(res);
        res.map((item) => {
          item.value = String(item.id);
          item.label = item.ship_name;
        });
        this.Page.Dialog.UpdataDialog.DialogFormType[5].options = res;
        this.Page.Dialog.SendDialog.DialogFormType[4].options = res;
      });
    },
    // 选择订单类型
    handleChangeStatasOptions(e) {
      // console.log(e);
      if (e[0] == 0) {
        this.SearchForm.OutType = 0;
      }
      if (e[1] && e[1] == 4) {
        this.SearchForm.OutType = 1;
      }
      if (e[1] && e[1] == 5) {
        this.SearchForm.OutType = 2;
      }
    },
    // 已发货未发货数量接口
    async GetCount() {
      try {
        const res = await GetShipListCount()
        // console.log(res);
        this.count = res
      } catch (error) {
        console.log(error);
      }
    },
    // 请求列表数据
    GetDataList() {
      this.loading = true;
      const data = {
        pageIndex: this.paramsquery.pageIndex,
        orderStatus: this.SearchForm.OrderStatas[0],
        orderType: this.SearchForm.OutType,
        shipStyle: this.SearchForm.OrderType,
        searchOrderId: this.SearchForm.OrderNo,
      };
      GetShipList(data).then((res) => {
        // console.log(res);
        this.loading = false;
        res.orderList.map((item) => {
          Object.entries(item).forEach(([key, value]) => {
            if (value === null) {
              item[key] = "";
            }
          });
        });
        this.tableData = res.orderList;
        this.pageIndex = res.pageIndex;
        this.pageSize = res.pageSize;
        this.total = res.pageTotal;
      }).catch(err => {
        console.log(err);
        this.loading = false
      })
    },
    // 新增发货流转单
    CreateDialog() {
      this.Dialog = this.Page.Dialog["CreateDialog"];
      this.$refs.DialogComponent.openModal("CreateDialog");
    },
    // 直采发货修改弹窗或者库存发货
    UpdataDialog(rows, name) {
      const { DialogForm, DialogFormType } = this.Page.Dialog[name];
      DialogFormType.forEach((item) => {
        // console.log(item);
        DialogForm[item.value] = rows[item.value];
      });
      // console.log(DialogFormType, "DialogFormType");
      this.SetCurrentItem(rows);
      this.Dialog = this.Page.Dialog[name];
      this.$refs.DialogComponent.openModal(name);
    },

    // 提交
    Submit(e) {
      // console.log(e);
      if (e.DialogTtile === "直采发货") this.UpdataInfo(e.form);
      if (e.DialogTtile === "库存发货")
        this.SendList(e.form, e.multipleSelection.id);
      if (e.DialogTtile === "新增发货流转单") this.CreateOrder(e.form);
    },
    // 新增订单
    CreateOrder(e) {
      addShip({ orderId: e.order_id }).then((res) => {
        if (res.msg) {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.GetDataList();
          this.$refs.DialogComponent.closeModal();
        } else {
          this.$message.error("新增失败");
        }
      });
    },
    // 直采发货提交
    UpdataInfo(e) {
      // console.log(e);
      // console.log(this.CurrentItem);
      const data = {
        id: this.CurrentItem.id,
        order_id: e.orderId,
        direct_ship_num: e.direct_ship_num,
        direct_ship_unit_price: e.direct_ship_unit_price,
        ship_person: e.ship_person,
        ship_time: e.ship_time == "" ? null : formattedDate(e.ship_time),
        ship_name: e.ship_name,
        ship_no: e.ship_no,
        ship_price: e.ship_price === "" ? 0 : e.ship_price,
        remark: e.remark,
      };
      // console.log(data);
      if (e.ship_no != "") data.shipStyle = 2;
      Object.entries(data).forEach(([key, value]) => {
        if (value == "") {
          data[key] = null;
        }
      });
      // console.log(data);
      UpdateShip(data).then((res) => {
        // console.log(res);
        if (res.msg) {
          this.$message({
            message: "直采发货成功",
            type: "success",
          });
          this.GetDataList();
          this.$refs.DialogComponent.closeModal();
        } else {
          this.$message.error("直采发货失败");
        }
      });
    },
    // 库存发货提交
    SendList(e, stock_id) {
      const data = {
        id: this.CurrentItem.id,
        order_id: e.orderId,
        stock_id,
        direct_ship_num: null,
        direct_ship_unit_price: null,
        ship_person: e.ship_person,
        ship_time: e.ship_time == "" ? null : formattedDate(e.ship_time),
        ship_name: e.ship_name,
        ship_no: e.ship_no,
        ship_price: e.ship_price === "" ? 0 : e.ship_price,
        remark: e.remark,
      };
      if (e.ship_no != "") data.shipStyle = 2;
      // console.log(data, "data");
      Object.entries(data).forEach(([key, value]) => {
        if (value == "") {
          data[key] = null;
        }
      });
      // console.log(data);
      UpdateShip(data).then((res) => {
        // console.log(res);
        if (res.msg === true) {
          this.$message({
            message: "库存发货成功",
            type: "success",
          });
          this.GetDataList();
          this.$refs.DialogComponent.closeModal();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
  components: {},
};
</script>

<style scoped lang="less">
@import url(../../../style/index.css);

/deep/ .el-form-item {
  margin-bottom: 0;
}
</style>
